<template>
  <z-modal
    :width="600"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{disableSubmit?"关闭":'取消'}}</a-button>
      <a-button type="primary" :loading="confirmLoading" @click="handleOk" v-if="!disableSubmit">确定</a-button>
      <!-- <a-button type="dashed" :loading="confirmLoading" @click="handleTest" v-if="!disableSubmit">测试</a-button> -->
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-row>
          <a-col :span="24" >
            <a-form-model-item label="租户ID" prop="id">
              <a-input placeholder="请输入租户ID" :disabled="disableSubmit" v-model.trim="form.id"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="租户名称" prop="name">
              <a-input placeholder="请输入连接名称" :disabled="disableSubmit" v-model.trim="form.name"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24" >
            <a-form-model-item label="数据源" prop="dataSourceInfoId">
              <z-dict-select-tag v-model="form.dataSourceInfoId" :disabled="disableSubmit" :options="dsOptions"/>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import { getAction, postAction } from '@/services/manage'
import debounce from 'lodash/debounce'
import { duplicateCheck } from '@/services/common'
export default {
  name: 'MultitenantModal',
  mixins: [ModalFormMixin],
  components: {
    ZDictSelectTag
  },
  data() {
    return {
      validatorRules: {
        id: [
          { required: true, message: '请输入租户ID', trigger: 'change' },
          { validator: (rule, value, callback) => this.validateCode(rule, value, callback), trigger: 'change' }
        ],
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        dataSourceInfoId: [
          // { required: true, message: '请选择数据库类型' }
        ]
      },
      url: {
        add: '/multitenant/org/add',
        ds: '/multitenant/ds/list'
      },
      dsOptions: [],
      destroyOnClose: false
    }
  },
  methods: {
    addAfter() {

    },
    classifyIntoFormData() {
      return [
        { ...this.form }
      ]
    },
    getDs() {
      getAction(this.url.ds).then(res => {
        if (res.success) {
          this.dsOptions = []
          res.result.forEach(item => {
            this.dsOptions.push({
              label: item.name,
              value: item.id
            })
          })
        }
      })
    },
    handleTest() {
      postAction(this.url.test, this.form).then(res => {
        if (res.success) {
          this.$message.success('连接成功')
        }
      })
    },
    validateCode: debounce(function(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        duplicateCheck({
          tableName: 'mb_organization',
          column: 'id_',
          key: value,
          exclude: this.editType === 'edit' ? value : ''
        }).then(res => {
          if (res.success) {
            res.result === 0 ? callback() : callback('租户ID已存在')
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    }, 400)
  },
  mounted() {
    this.getDs()
  }
}
</script>

